<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css" rel="stylesheet">
</head>
<body>
<h1>表单生成</h1>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">表单标签</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="label"  placeholder="请输入表单标签">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">表单Name</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="name" placeholder="请输入表单元素Name">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">表单元素ID</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="id" placeholder="请输入表单元素ID">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">placeholder</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="placeHolder" placeholder="请输入表单元素placeHolder">
        </div>
    </div>
    <div class="weui-cell">
    <div class="weui-cell__hd"><label class="weui-label">表单元素类型</label></div>
    <div class="weui-cell__bd">
        <select id="category">
            <option value="">==请选择==</option>
            <option value="select">下拉框</option>
            <option value="text">文本框</option>
            <option value="passWord">密码框</option>
            <option value="textArea">文本域</option>
            <option value="radio">单选框</option>
            <option value="checkbox">多选框</option>
        </select>
    </div>
</div>
    <a href="javascript:;" class="weui-btn weui-btn_primary" id="add">增加</a>
</div>
<hr>
<div class="weui-cells weui-cells_form" id="target">

</div>
<a href="javascript:;" class="weui-btn weui-btn_primary" id=" submitBtn">保存</a>


<script id="radio-template" type="x-tmpl-mustache">
    {{#ele}}
    <div class="weui-cells weui-cells_radio">
        <label class="weui-cell weui-check__label" for="{{id}}">
            <div class="weui-cell__bd">
                <p>{{label}}</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="{{name}}" id="{{id}}">
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>
   {{/ele}}
</script>


<script id="checkbox-template" type="x-tmpl-mustache">
    {{#ele}}
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="{{id}}">
        <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" name="{{name}}" id="{{id}}">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
          <p>{{label}}</p>
        </div>
    </div>
    {{/ele}}
</script>

<script id="textArea-template" type="x-tmpl-mustache">
     {{#ele}}
      <div class="weui-cell">
        <div class="weui-cell__bd">
         <textarea class="weui-textarea" name="{{name}}" id="{{id}}" placeholder="{{placeHolder}}" rows="3"></textarea>
        </div>
      </div>
      {{/ele}}
  </div>
</script>
<script id="passWord-template" type="x-tmpl-mustache">
     {{#ele}}
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">{{label}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="password" name="{{name}}"  placeholder="{{placeHolder}}">
        </div>
      </div>
      {{/ele}}
  </div>
</script>
<script id="text-template" type="x-tmpl-mustache">
     {{#ele}}
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">{{label}}</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" name="{{name}}"  placeholder="{{placeHolder}}">
        </div>
      </div>
      {{/ele}}
  </div>
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>
<script>
    $(document).ready(function () {
        $("#add").click(function () {

            var templateId = $("#category").val();
            var ele = {
                "name":$("#name").val(),
                "placeHolder":$("#placeHolder").val(),
                "label":$("#label").val(),
                "id":$("#id").val()
            }
            var template = $('#'+templateId+"-template").html();
            Mustache.parse(template);
            var rendered = Mustache.render(template, {ele: ele});
            $('#target').append(rendered);
        });
    })
</script>
</body>
</html>